<template>
	<view>
		<view class="body">
		    <view class="order-address">
		        <view class="user-info flex-row">
		            <view class="user-info-name flex-grow-1">
		               收货人：{{order_info.name}}
		            </view>
		            <view class="user-info-mobile flex-grow-1">
		                {{order_info.mobile}}
		            </view>
		        </view>
		        <view>{{order_info.address}}</view>
		    </view>
		    <view class="order-no">
		        <view class="order-no-num flex-row">
		            <view class="order-no-num-left flex-grow-1">
		                订单编号：{{order_info.order_no}}
		            </view>
		            <view @tap="copyText" class="order-no-num-right flex-grow-0 flex-y-center flex-x-center" :data-text="order_info.order_no">
		                复制
		            </view>
		        </view>
		        <view class="order-add-time">
		            下单时间：{{order_info.addtime}}
		        </view>
		    </view>
		    <view class="order-info">
		        <view class="order-info-item flex-row">
		            <view class="order-info-title flex-grow-1">
		                商品总额
		            </view>
		            <view class="order-info-val flex-grow-1">
		                {{order_info.integral}}{{money_name}}
		                <block v-if="order_info.total_price>0">+ ¥ {{order_info.total_price}}</block>
		            </view>
		        </view>
		        <view class="order-info-item flex-row">
		            <view class="order-info-title flex-grow-1">
		                商品数量
		            </view>
		            <view class="order-info-val flex-grow-1">
		                {{order_info.detail.num}}
		            </view>
		        </view>
		        <view class="order-info-item flex-row">
		            <view class="order-info-title flex-grow-1">
		                运费
		            </view>
		            <view class="order-info-val flex-grow-1">
		                ¥ {{order_info.express_price}}
		            </view>
		        </view>
		    </view>
		    <view class="order-total-price">
		        合计：
		        <text style="color:#ff5c5c;">{{order_info.integral}}{{money_name}}<block v-if="order_info.total_price>0">+ ¥ {{order_info.total_price}}</block>
		        </text>
		    </view>
		    <view class="order-goods flex-row">
		        <view class="flex-grow-0 goods-image">
		            <image :src="order_info.detail.pic"></image>
		        </view>
		        <view class="flex-grow-1 flex-col">
		            <view class="flex-grow-1">
		                <view class="goods-name">{{order_info.detail.goods_name}}</view>
		                <view class="attr-list flex-row">
		                    <block v-for="(item,index) in order_info.detail.attr">
		                        {{item.attr_group_name}}:{{item.attr_name}}
		                    </block>
		                </view>
		            </view>
		            <view class="flex-grow-0 flex-row order-price">
		                <view class="flex-grow-1 num">×{{order_info.detail.num}}</view>
		                <view class="flex-grow-0 price">{{order_info.integral}}{{money_name}}
		                    <block v-if="order_info.total_price>0">+ ¥ {{order_info.total_price}}</block>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_info:{
					name:'王哈哈',
					mobile:'13158808567',
					address:'重庆市巴南区旭辉乐活城29A',
					order_no:'AJ7438927482343',
					addtime:'2022-6-23 12:12:12',
					integral:'1999',
					express_price:'0',
					detail:{}
				},
				money_name:this.globalData.money_name,
			}
		},
		methods: {
			    copyText: function(e) {
			        var t = e.currentTarget.dataset.text;
					uni.setClipboardData({
						data: t,
						success: function() {
						    uni.showToast({
						        title: "已复制"
						    });
						}
					})
			    }
		}
	}
</script>

<style>
.order-detail-top {
    height: 140rpx;
    background-image: url('');
    color: #ffffff;
    padding-left: 88rpx;
    background-size: 100% 100%;
}

.order-status {
    font-size: 13pt;
    margin-bottom: 14rpx;
}

.order-time {
    font-size: 10pt;
}

.user-info-mobile {
    text-align: right;
}

.order-address {
    background-color: #ffffff;
    padding: 32rpx 24rpx;
    font-size: 11pt;
    color: #353535;
}

.user-address-info {
    padding-top: 19rpx;
}

.order-no {
    margin-top: 20rpx;
    padding: 32rpx 24rpx;
    font-size: 11pt;
    color: #353535;
    background-color: #ffffff;
}

.order-no-num-right {
    text-align: right;
    width: 74rpx;
    height: 44rpx;
    border: 1rpx solid #dddddd;
    border-radius: 5rpx;
    font-size: 7pt;
    color: #666666;
}

.order-add-time {
    margin-top: 20rpx;
}

.order-info-val {
    text-align: right;
}

.order-info {
    margin-top: 20rpx;
    padding: 12rpx 24rpx 32rpx 24rpx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
}

.order-info-item {
    padding-top: 20rpx;
}

.order-total-price {
    border-top: 1rpx solid #e2e2e2;
    background-color: #ffffff;
    line-height: 96rpx;
    text-align: right;
    height: 96rpx;
    padding: 0 24rpx;
    color: #353535;
    font-size: 13pt;
}

.order-goods {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 0 24rpx 30rpx 24rpx;
    color: #353535;
}

.goods-image image {
    width: 156rpx;
    height: 156rpx;
    margin-right: 26rpx;
    margin-top: 30rpx;
}

.goods-name {
    font-size: 11pt;
    margin-top: 32rpx;
    line-height: 1;
}

.attr-list {
    font-size: 9pt;
    line-height: 1;
    margin-top: 12rpx;
    margin-bottom: 5rpx;
}

.order-price {
    font-size: 10pt;
}

.order-footer {
    height: 98rpx;
    margin-top: 20rpx;
    border-top: 1rpx solid #e2e2e2;
    background-color: #ffffff;
    padding: 0 24rpx;
    text-align: right;
    justify-content: flex-end;
}

.play-btn {
    height: 64rpx;
    border: 1rpx solid #ff5c5c!important;
    color: #ff5c5c;
    border-radius: 10rpx;
    line-height: 64rpx;
    text-align: center;
    padding: 0 20rpx!important;
    margin: 0!important;
    background-color: transparent!important;
}

button::after {
    content: normal;
}

.express-info {
    padding: 20rpx 24rpx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
    margin-bottom: 20rpx;
}

.express-info-right image {
    width: 16rpx;
    height: 26rpx;
}

.express {
    margin-bottom: 20rpx;
}

.block {
    margin-top: 20rpx;
}

.block-row {
    padding-bottom: 20rpx;
}
</style>
